<template>
    <div class="profile">
        <div class="header">
            <van-nav-bar title="个人信息" left-arrow @click-left="handleLeft" />
        </div>
        <div class="profile_form">
            <div class="profile_form_item" @click="postImage('userImage', 1)">
                <div class="label">头像</div>
                <div class="content">
                    <van-image class="user_img" :src="userInfo?.avatarUrl || basicAvatar" round fit="cover" />
                    <img class="content_icon" src="@/assets/operation/icon_huisejiantou.png" alt="">
                </div>
            </div>
            <div class="profile_form_item">
                <div class="label">名称</div>
                <div class="content">
                    {{ userInfo?.userName }}
                    <img class="content_icon" src="@/assets/operation/icon_huisejiantou.png" alt="">
                </div>
            </div>
            <div class="profile_form_item">
                <div class="label">账号</div>
                <div class="content">
                    {{ userInfo?.userName }}
                </div>
            </div>
            <div class="profile_form_item">
                <div class="label">真实姓名</div>
                <div class="content">
                    {{ userInfo?.userName }}
                </div>
            </div>
            <div class="profile_form_item">
                <div class="label">部门</div>
                <div class="content">
                    {{ userInfo?.nickName }}
                </div>
            </div>
            <div class="profile_form_item">
                <div class="label">岗位</div>
                <div class="content">
                    {{ roles?.roleName }}
                </div>
            </div>
            <div class="profile_form_item">
                <div class="label">手机号</div>
                <div class="content">
                    {{ userInfo?.phonenumber }}
                </div>
            </div>

        </div>

        <!-- <div class="profile_form copy">
            <div class="profile_form_item">
                <div class="label">我的地址</div>
                <div class="content">
                    <img class="content_icon" src="@/assets/operation/icon_huisejiantou.png" alt="">
                </div>
            </div>
        </div> -->
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getInfo } from "@/api/supplierList/index";
import { useRouter } from 'vue-router'
import { getEnvValue } from "@/utils/index";
import { storeToRefs } from "pinia";
import { loginStore } from "@/store/login";
import { editAvatar } from '@/api/operation/index'
import { showSuccessToast } from "vant";
const basicAvatar = new URL("@/assets/newui/home/basicAvatar.png", import.meta.url).href;

const store = loginStore();
const { token } = storeToRefs(store);
const router = useRouter()

const userInfo = ref<any>({})
const roles = ref<any>({});
const GetInfo = async () => {
    const res = await getInfo();
    roles.value = res.data.user.roles[0];
    userInfo.value = res.data.user;
};
GetInfo();
const postImage = (name: string, count: number) => {
    (window as any).uni.webView.postMessage({
        data: {
            type: "img",
            count: count,
            name: name,
            url: getEnvValue("VITE_APP_UPLOAD_API") + '/resource/oss/upload',
            header: {
                Authorization: `Bearer ${token.value}`,
                clientid: "e5cd7e4891bf95d1d19206ce24a7b32e",
            },
        },
    });
};

(window as any).msgFromUniapp = function (arg) {
    // 商品图 限制手机端多选四个全部渲染问题
    if (arg.name == "userImage") {
        if(arg.url){
            getEditAvatar(arg.url)
        }
    }
};

const getEditAvatar = async (url: any) => {
    await editAvatar(url)
    showSuccessToast({ type: "success", message: "头像设置成功" });
    GetInfo()
}

const handleLeft = () => {
    router.back()
}
</script>

<style lang="less" scoped>
.profile {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-flow: column;
    background: #F6FAFF;

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .profile_form {
        background: #fff;
        padding: 15px 15px 0;
        margin-bottom: 15px;

        .profile_form_item {
            padding: 20px 0;
            border-bottom: 1px solid #FAFAFF;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .label {
                width: 100px;
            }

            .content {
                flex: 0.9;
                min-width: 0;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                font-weight: 400;
                font-size: 16px;
                color: #8492AD;

                .user_img {
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                }

                .content_icon {
                    width: 7px;
                    height: 12px;
                    margin-left: 15px;
                }
            }
        }
    }

    .copy {
        flex: 1;
        min-height: 0;
        margin: 0;
    }
}
</style>